<template>
    <div>
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="列表类型：" class="mt_5">
                        <el-select v-model="formInline.value" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间：" class="mt_5">
                        <div class="block">
                            <el-date-picker
                                v-model="formInline.value4"
                                type="month"
                                placeholder="选择月">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-button type="primary" @click="selectCarrierName">
                    <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                    <i class="el-icon-refresh"></i>
                    </el-button>
                </el-form>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="month" label="月份" width="260">
            <template slot-scope="scope">
                <span class="link" @click="getDetail(scope.row)">{{ scope.row.month}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="type" label="列表类型" width="260">
            </el-table-column>
            <el-table-column prop="caozuo" label="操作员" width="260">
            </el-table-column>
            <el-table-column prop="card_num" label="卡号数量">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    value: '',
                    value4: ''
                },
                options: [
                    {
                        value: '选项1',
                        label: '服务周期到期卡号列表'
                    },
                    {
                        value: '选项2',
                        label: '续期卡号列表'
                    },
                    {
                        value: '选项3',
                        label: '停机保号卡号列表'
                    },
                    {
                        value: '选项4',
                        label: '销卡卡号列表'
                    }
                ],
                tableData: [
                    {
                        id: 1,
                        month: '2018-09',
                        type: '服务周期到期卡号列表',
                        caozuo: '平台',
                        card_num: 3
                    }
                ]
            }
        },
        methods: {
            getDetail(goods) {
                this.$router.push({
                    path: `/agent_increase/${this.$route.params.id9}/agent_service_circle_manage/${goods.id}`
                })
            }
        }
    }
</script>

<style scoped>

</style>